<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>

    <!-- <div id="content">
        <span id="ele">页面元素</span>
    </div>

    <input type="text" value="input" id="name"> -->

    <!-- <a href="http://www.baidu.com">百度</a> -->

    <!-- <div style="font-size: 40px;">我是一个div</div> -->

    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>

    <script>
        //添加元素
        // $("ol").append("append");
        // $("ol").prepend("prepend");
        // $("ol").after("after");
        // $("ol").before("before");


        //删除元素
        // $("ol").remove();

        $("ol").empty();

        // $("#content").click(function(){
        //     //获取页面元素内容
        //     // console.log($(this).text());  //不能获取html标签
        //     // console.log($(this).html());  //会返回html标签
        //     console.log($("#name").val());
            
        //     //修改页面元素
        //     // $(this).text("<h1>我是点击后的内容</h1>");
        //     // $(this).html("<h1>我是点击后的内容</h1>")
        //     $("#name").val("input222222222");
        // });
        
        // console.log($("a").attr("href"));
        // $("a").attr("href", "http://www.youdao.com");
        
        //操作css
        // console.log($("div").css("font-size"));
        // $("div").css("font-size", "16px");


        // $(document).ready(function(){
        //     alert("页面加载完成");
        // });

        // $("button").click(function(){
        //     alert("点击弹框");
        // });
    </script>
</body>
</html>